<template>
	<div class="card-item-wrap">
		<div class="card-item" v-for="(card, index) in list" :key="index">
	    <p class="item-title clearfix">
	    	<em :class="card.received_at == '0' && 'no-read'">
	      	<i class="van-ellipsis block">{{card.title || card.message_kind_name}}</i>
	    	</em>
	      <span v-if="card.notified_at_format">{{card.notified_at_format}}</span>
	    </p>

	    <div
				class="item-content" 
				:class="card.readed_at != '0' && 'c-gray'"
				@click="gotoPage(index)"
			>
				<van-row type="flex" justify="space-between">
					<van-col 
						class="msg-img" 
						tag="img" 
						span="8" 
						:src="card.cover" 
						v-lazy="card.cover"
						v-if="card.cover"
					/>
					<van-col 
					:span="card.cover ? 18 : 24"
					tag="p" 
					class="van-multi-ellipsis--l3 msg-summary"
					>{{card.summary}}</van-col>
				</van-row>

	    	<van-row class="show-detail" type="flex" justify="space-between">
	    		<van-col 
						tag="a" 
						span="12" 
						class="c-main"
					>
						<em v-if="card.content_kind != '2'">查看详情<van-icon class-prefix="ucai-icon" name="arrow_rgt" /></em>
					</van-col>
	    		<van-col 
						tag="span" 
						class="text-right" 
						span="12" 
						v-if="card.readed_at == '0'"
					>详情未阅读</van-col>
	    	</van-row>
	    </div>

	  </div>
	</div>
</template>
<script>
	import { Icon, Row, Col } from "vant"
	import {
    readMsg
	} from '@api/modules/message'
	import { replaceAppPath } from '@router/path'

	export default {
		name: 'msg-item',
		data(){
			return {}
		},
		props: ['list'],
		components: {
			[Icon.name]: Icon,
			[Row.name]: Row,
			[Col.name]: Col,
		},
		methods: {
			gotoPage(index){
				// 手动去掉未读标识
				const msg = this.list[index]
				msg.received_at = msg.readed_at = new Date().getTime()
				readMsg(msg.id).then(res => {
					const link = replaceAppPath(msg.detail_url)
					if(!link)
						return
					setTimeout(() => {
						window.location.href = link
					}, 100)
				})
			}
			
		}
	}
</script>
<style lang="less" scoped>
@import "~@style_m/basic/utils/index";
  @import "~@style_m/components/card-list";
	.no-read{
		position: relative;
		&:after {
			content: '';
			display: block;
			position: absolute;
			right: -4px;
			top: 0;
			width: 7px;
			height: 7px;
			background: @red;
			border-radius: 50%;
		}
	}
	
	.item-title > em {
		display: inline-block;
		vertical-align: middle;
		max-width: 220px;
	}

	.show-detail {
		margin-top: 10px;
		line-height: 1;
		font-size: 12px;
		.ucai-icon {
			font-size: 12px;
		}
		span {
			color: @red;
		}
	}

	.msg-img {
		width: 90px;
		height: 60px;
		border-radius: 3px;
		object-fit: cover;
		margin-right: 5px;
	}
	.msg-summary {
		line-height: 1.6;
	}
</style>